<script setup lang="ts">
import type { Comment as CommentType } from '@/apis/methods/comment.api'
import CommentItem from './CommentItem.vue'
import { PhArrowClockwise, PhChatCircle, PhSparkle } from '@phosphor-icons/vue'

interface Props {
  comments: CommentType[]
  loading?: boolean
  loadingMore?: boolean
  hasMore?: boolean
  repliesData: Record<string, CommentType[]>
  showReplies: Record<string, boolean>
  hasMoreReplies: Record<string, boolean>
  submitting?: boolean
  // 样式配置
  cardStyle?: 'default' | 'minimal' | 'elevated'
  avatarSize?: 'sm' | 'md' | 'lg'
  showEmptyState?: boolean
  emptyStateMessage?: string
  emptyStateSubMessage?: string
}

withDefaults(defineProps<Props>(), {
  loading: false,
  loadingMore: false,
  hasMore: false,
  submitting: false,
  cardStyle: 'default',
  avatarSize: 'md',
  showEmptyState: true,
  emptyStateMessage: '暂无评论',
  emptyStateSubMessage: '来发表第一条评论吧！',
})

const emit = defineEmits<{
  loadMore: []
  toggleReplies: [commentId: string]
  loadMoreReplies: [parentId: string]
  toggleLike: [commentId: string]
  createReply: [parentId: string, content: string, mentionedUsers: string[]]
  reportComment: [commentId: string]
  deleteComment: [commentId: string]
}>()

const handleLoadMore = () => {
  emit('loadMore')
}

const handleToggleReplies = (commentId: string) => {
  emit('toggleReplies', commentId)
}

const handleLoadMoreReplies = (parentId: string) => {
  emit('loadMoreReplies', parentId)
}

const handleToggleLike = (commentId: string) => {
  emit('toggleLike', commentId)
}

const handleCreateReply = (parentId: string, content: string, mentionedUsers: string[] = []) => {
  emit('createReply', parentId, content, mentionedUsers)
}

const handleReportComment = (commentId: string) => {
  emit('reportComment', commentId)
}

const handleDeleteComment = (commentId: string) => {
  emit('deleteComment', commentId)
}
</script>

<template>
  <div class="comment-list-container">
    <!-- 评论列表 -->
    <div v-if="comments && comments.length > 0" class="space-y-6">
      <CommentItem
        v-for="comment in comments"
        :key="comment.id"
        :comment="comment"
        :replies="repliesData[comment.id] || []"
        :show-replies="showReplies[comment.id] || false"
        :has-more-replies="hasMoreReplies[comment.id] || false"
        :submitting="submitting"
        :card-style="cardStyle"
        :avatar-size="avatarSize"
        @toggle-replies="handleToggleReplies"
        @load-more-replies="handleLoadMoreReplies"
        @toggle-like="handleToggleLike"
        @create-reply="handleCreateReply"
        @report-comment="handleReportComment"
        @delete-comment="handleDeleteComment"
      >
        <!-- 自定义头像插槽示例 -->
        <template #avatar="{ author, size }">
          <div class="relative">
            <div
              v-if="author.avatar"
              :class="[
                'rounded-full overflow-hidden border-2 border-primary/20 shadow-lg',
                size === 'sm' ? 'w-8 h-8' : size === 'lg' ? 'w-16 h-16' : 'w-12 h-12',
              ]"
            >
              <img :src="author.avatar" :alt="author.name" class="w-full h-full object-cover" />
            </div>
            <div
              v-else
              :class="[
                'bg-gradient-to-br from-primary via-primary/80 to-secondary rounded-full flex items-center justify-center text-primary-content font-bold shadow-lg',
                size === 'sm'
                  ? 'w-8 h-8 text-sm'
                  : size === 'lg'
                    ? 'w-16 h-16 text-lg'
                    : 'w-12 h-12 text-base',
              ]"
            >
              {{ author.name.charAt(0).toUpperCase() }}
            </div>
            <!-- 在线状态指示器 -->
            <div
              class="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-success rounded-full border-2 border-base-100"
            ></div>
          </div>
        </template>

        <!-- 自定义用户信息插槽示例 -->
        <template #author="{ author }">
          <div class="flex items-center gap-2">
            <h4 class="font-semibold text-base text-base-content">
              {{ author.name }}
            </h4>
            <!-- 用户徽章 -->
            <span class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded-full font-medium">
              VIP
            </span>
          </div>
        </template>

        <!-- 自定义内容插槽示例 -->
        <template #content="{ content, comment }">
          <div class="comment-content-enhanced">
            <div v-html="content"></div>
            <!-- 可以在这里添加内容相关的额外信息 -->
            <div v-if="comment.mentionedUsers && comment.mentionedUsers.length > 0" class="mt-2">
              <span class="text-xs text-primary">@{{ comment.mentionedUsers.join(', ') }}</span>
            </div>
          </div>
        </template>
      </CommentItem>
    </div>

    <!-- 空状态 -->
    <div v-else-if="!loading && showEmptyState" class="empty-state">
      <div class="text-center py-16">
        <div class="mb-6">
          <div
            class="w-20 h-20 mx-auto bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full flex items-center justify-center mb-4"
          >
            <PhChatCircle :size="32" class="text-primary/60" />
          </div>
          <h3 class="text-xl font-semibold text-base-content mb-2">{{ emptyStateMessage }}</h3>
          <p class="text-base-content/60 text-sm">{{ emptyStateSubMessage }}</p>
        </div>

        <!-- 装饰性元素 -->
        <div class="flex justify-center gap-2 opacity-40">
          <PhSparkle :size="16" class="text-primary animate-pulse" />
          <PhSparkle :size="20" class="text-secondary animate-pulse delay-100" />
          <PhSparkle :size="16" class="text-accent animate-pulse delay-200" />
        </div>
      </div>
    </div>

    <!-- 加载更多按钮 -->
    <div v-if="hasMore && !loadingMore" class="load-more-section">
      <div class="text-center mt-8">
        <button
          @click="handleLoadMore"
          class="btn btn-outline btn-primary gap-3 px-8 py-3 hover:btn-primary hover:scale-105 transition-all duration-200 shadow-lg"
        >
          <PhArrowClockwise :size="18" />
          <span class="font-medium">加载更多评论</span>
        </button>
      </div>
    </div>

    <!-- 加载更多状态 -->
    <div v-if="loadingMore" class="loading-more-state">
      <div class="text-center mt-8">
        <div class="flex items-center justify-center gap-3">
          <div class="loading loading-spinner loading-md text-primary"></div>
          <span class="text-base-content/60 text-sm font-medium">加载中...</span>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="text-center py-12">
        <div class="flex items-center justify-center gap-3">
          <div class="loading loading-spinner loading-lg text-primary"></div>
          <span class="text-base-content/60 text-lg font-medium">加载评论中...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.comment-list-container {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empty-state {
  animation: fadeInUp 0.5s ease-out;
}

.load-more-section {
  animation: fadeInUp 0.3s ease-out;
}

.loading-more-state {
  animation: fadeInUp 0.2s ease-out;
}

.loading-state {
  animation: fadeInUp 0.2s ease-out;
}

.comment-content-enhanced {
  line-height: 1.7;
}

.comment-content-enhanced :deep(p) {
  margin: 0.5rem 0;
}

.comment-content-enhanced :deep(code) {
  background: hsl(var(--b2));
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  color: hsl(var(--bc));
}

.comment-content-enhanced :deep(pre) {
  background: hsl(var(--b2));
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
  border: 1px solid hsl(var(--b3));
}

.comment-content-enhanced :deep(blockquote) {
  border-left: 4px solid hsl(var(--p));
  padding-left: 1rem;
  margin: 1rem 0;
  color: hsl(var(--bc) / 0.8);
  font-style: italic;
}

.comment-content-enhanced :deep(a) {
  color: hsl(var(--p));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.comment-content-enhanced :deep(a:hover) {
  border-bottom-color: hsl(var(--p));
}

/* 按钮悬停效果 */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .comment-list-container {
    padding: 0 0.5rem;
  }

  .empty-state {
    padding: 2rem 1rem;
  }

  .empty-state h3 {
    font-size: 1.125rem;
  }

  .empty-state p {
    font-size: 0.875rem;
  }
}
</style>
